<template>
  <page-layout :noToolbar="true">
    <div slot="toolbar" >
      <!--<el-button size="small" round type="primary" @click="newGiftOrder">新增新闻</el-button>-->
    </div>
    <div class="card-header">订单管理</div>
    <el-card class="box-card">
      <el-card class="box-card">
      <el-row>
        <el-col :span="24">
            <el-form ref="searchGiftOrderCondition" :model="searchGiftOrderCondition" label-width="80px" inline>
              <el-form-item label="活动标题">
                <el-input v-model="searchGiftOrderCondition.giftTitle" />
              </el-form-item>
              <el-form-item label="订单号">
                <el-input v-model="searchGiftOrderCondition.orderNo" />
              </el-form-item>
              <el-form-item label="兑换码">
                <el-input v-model="searchGiftOrderCondition.verifyCode" />
              </el-form-item>
              <el-form-item label="姓名">
              <el-input v-model="searchGiftOrderCondition.userName" />
              </el-form-item>
              <el-form-item label="手机号">
              <el-input v-model="searchGiftOrderCondition.userMobile" />
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="searchGiftOrderCondition.status" placeholder="请选择" >
                  <el-option
                    v-for="item in GiftOrderStatus"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search(1)">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
            <el-table
              :data="giftOrderList.content" border stripe
              style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="收货地址：">
                      <span>{{ props.row.address }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                prop="orderNo"
                label="订单号"
                width="220">
              </el-table-column>
              <el-table-column prop="giftTitle" label="兑换商品" >
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="兑换时间" width="180">
              </el-table-column>
              <el-table-column
                prop="verifyTime"
                label="核销时间" width="120">
              </el-table-column>
              <el-table-column
                prop="userName"
                label="兑换人" width="80">
              </el-table-column>
                <el-table-column
                prop="userMobile"
                label="手机号" width="120">
              </el-table-column>
              <el-table-column
                prop="usedStore"
                label="花费积分" width="120">
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态" width="120">
                <template slot-scope="scope">
                  <span>{{scope.row.status| keyText('GiftOrderStatus')}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <!--<el-button size="mini" type="text"  @click="seeDetail(scope.row)"> 查看 </el-button>-->
                  <el-button size="mini" v-if="scope.row.status==='PAID'" type="text" @click="deleteGiftOrder(scope.row)">核销</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="mt10">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="giftOrderList.totalElements"
                :page-size="giftOrderList.size"
                :current-page.sync="currentGiftOrderPage" @current-change="getPageChange">
              </el-pagination>
            </div>
          </el-card>
    </el-card>
  </page-layout>
</template>
<script>
import PageLayout from "@/components/page-layout";
import { mapGetters } from "vuex";
import ImageCover from "@/components/image-cover";
import Status from "@/libs/status";
import Moment from "moment";
import _ from "lodash";
export default {
  created() {
    this.search(1);
  },
  mounted() {
    this.GiftOrderStatus = _.clone(Status.GiftOrderStatus);
    this.GiftOrderStatus.unshift({ value: "", text: "全部" });
  },
  data() {
    return {
      currentGiftOrderPage: 1,
      showGiftOrderEditor: false,
      showPreview: false,
      curPreObj: {},
      GiftOrderStatus: [],
      value4: []
    };
  },
  computed: {
    ...mapGetters({
      giftOrderList: "giftOrderList",
      searchGiftOrderCondition: "searchGiftOrderCondition"
    })
  },
  methods: {
    getPageChange(val) {
      this.searchGiftOrderCondition.startTime = "";
      this.searchGiftOrderCondition.endTime = "";
      if (this.value4 && this.value4.length > 0) {
        this.searchGiftOrderCondition.startTime = Moment(this.value4[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.searchGiftOrderCondition.endTime = Moment(this.value4[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      console.log(this.searchGiftOrderCondition);
      var tem = Object.assign(
        { pageIndex: val - 1 },
        this.searchGiftOrderCondition
      );
      console.log(tem);
      this.$store.dispatch("getGiftOrderPageS", tem).then(ret => {});
    },
    search(val) {
      this.getPageChange(val);
    },
    deleteGiftOrder(row) {
      this.$confirm("确认核销当前兑换码【" + row.verifyCode + "】?", "提示", {})
        .then(() => {
          this.$store
            .dispatch("verifyGiftS", { orderNo: row.orderNo })
            .then(ret => {
              this.getPageChange(1);
              this.$notify({
                title: "核销成功",
                type: "success"
              });
            });
        })
        .catch(() => {});
    },
    seeDetail(row) {
      console.log(row.id);
      this.$store.dispatch("getGiftOrderS", row.id).then(ret => {});
      this.showPreview = true;
    },
    onShowPreviewClose() {
      this.showPreview = false;
      this.getPageChange(1);
    }
  },
  components: {
    PageLayout,
    ImageCover
  }
};
</script>
<style>
</style>
